<template>
  <el-card>
    <template #header>
      <div class="header">
        <span>用户管理</span>
        <div>
          <el-input
            v-model="serchCondition.userName"
            placeholder="用户名"
            style="width: 200px; margin-right: 20px"
          >
          </el-input>
          <el-button type="primary" @click="serchUserPage">查询</el-button>
        </div>
      </div>
    </template>
    <el-form class="serch-form">
      <el-form-item>
        <div class="serch-item-userName">
          <el-button class="button" type="primary">添加用户</el-button>
        </div>
      </el-form-item>
    </el-form>
    <el-table :data="userPage.records">
      <el-table-column prop="userName" label="用户名" />
      <el-table-column prop="role" label="角色" />
      <el-table-column prop="createdAt" label="创建时间" />
    </el-table>
    <template #footer>
      <div class="pagination">
        <el-pagination
          v-model:current-page="userPage.current"
          :page-size="userPage.size"
          :background="true"
          layout="total, prev, pager, next"
          :total="userPage.total"
          @current-change="handleCurrentChange"
        />
      </div>
    </template>
  </el-card>
</template>
<script setup>
import { request } from '@/utils/request'
import { ElMessage } from 'element-plus'
import { onBeforeMount, ref } from 'vue'
const serchCondition = ref({
  userName: '',
})
const userPage = ref({
  total: 0,
  size: 10,
  current: 1,
  records: [],
})
const requestUserPage = async () => {
  try {
    let response = await request.get('/api/admin/user/page', {
      params: {
        ...serchCondition.value,
        current: userPage.value.current,
      },
    })
    userPage.value = response
  } catch (error) {
    console.log(error);
    ElMessage.error('获取用户列表失败')
  }
}
onBeforeMount(() => {
  requestUserPage()
})
const serchUserPage = () => {
  requestUserPage()
}
const handleCurrentChange = () => {
  requestUserPage()
}
</script>
<style scoped lang="scss">
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.serch-form {
  .serch-item-userName {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
}
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
